<template>
    <div class="layout-padding">
        <el-card class="layout-padding-auto" shadow="hover">
            <div class="mb15">
                <el-input placeholder="请输入文件名称" size="default" v-model="state.tableData.param.name"
                          style="max-width: 180px"></el-input>
                <el-button class="ml10" size="default" type="primary" @click="getTableData">
                    <el-icon>
                        <ele-Search/>
                    </el-icon>
                    查询
                </el-button>
                <el-button class="ml10" size="default" type="success" @click="openAddDialog">
                    <el-icon>
                        <ele-FolderAdd/>
                    </el-icon>
                    上传
                </el-button>
            </div>
            <el-table v-loading="state.tableData.loading" :data="state.tableData.data" style="width: 100%">
                <el-table-column label="序号" type="index" width="60"/>
                <el-table-column label="文件名" prop="name" show-overflow-tooltip></el-table-column>
                <el-table-column label="预览" prop="preview">
                    <template #default="{row}">
                        <el-image v-if="row.type.startsWith('image/')"
                                  style="height: 40px"
                                  fit="cover"
                                  :src="row.url"
                                  :zoom-rate="1.2"
                                  :preview-src-list="[row.url]"
                                  :initial-index="0"
                                  preview-teleported
                                  lazy
                        />
                    </template>
                </el-table-column>
                <el-table-column label="存储策略" prop="storage.name" show-overflow-tooltip></el-table-column>
                <el-table-column label="文件类型" prop="type" show-overflow-tooltip></el-table-column>
                <el-table-column label="文件大小" prop="size" show-overflow-tooltip>
                    <template #default="{row}">
                        {{ FormatUtils.formatFileSize(row.size) }}
                    </template>
                </el-table-column>
                <el-table-column label="文件状态" prop="state" min-width="70px">
                    <template #default="{row}">
                        <el-tag
                            :type="getStateType(row)"
                            class="mx-1"
                            effect="dark"
                            round
                            size="small"
                        >
                            {{ getStateName(row) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" min-width="90px"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="{row}">
                        <!--                        <el-button size="small" text type="primary"-->
                        <!--                                   @click="download(row)"-->
                        <!--                        >下载-->
                        <!--                        </el-button>-->
                        <el-button size="small" text type="primary"
                                   @click="copyUrl(row)"
                        >复制
                        </el-button>
                        <el-button size="small" text type="primary"
                                   @click="deleteFile(row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="state.tableData.param.page"
                v-model:page-size="state.tableData.param.size"
                :page-sizes="[10, 20, 30]"
                :total="state.tableData.totalCount"
                background
                class="mt15"
                layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </el-card>
        <add-file ref="addFileRef" @refresh="getTableData()"/>
    </div>
</template>

<script lang="ts" name="fileManagement" setup>
import {defineAsyncComponent, onMounted, reactive, ref, watch} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {fileApi} from "/@/api/file";
import FormatUtils from "/@/utils/FormatUtils";
import {CommonUtils} from "/@/utils/CommonUtils";
import {FileQueryDto} from "/@/types/views";

// 引入组件
const AddFile = defineAsyncComponent(() => import('./AddFile.vue'));

// 定义变量内容
const addFileRef = ref();
const state = reactive<FileState>({
    tableData: {
        data: [],
        totalCount: 0,
        loading: false,
        param: {
            page: 1,
            size: 10,
            name: ""
        },
    },
});
const getStateType = (row: FileVo) => {
    switch (row.state) {
        case 1:
            return "success";
        case 2:
            return "warning";
        case 3:
            return "danger";
    }
}
const getStateName = (row: FileVo) => {
    switch (row.state) {
        case 1:
            return "上传成功";
        case 2:
            return "上传中";
        case 3:
            return "上传失败";
    }
}
// 初始化表格数据
const getTableData = async () => {
    state.tableData.loading = true;
    const query: FileQueryDto = {
        page: state.tableData.param.page,
        size: state.tableData.param.size,
        name: state.tableData.param.name
    };
    const pageResult = await fileApi.listFile(query);
    state.tableData.data = pageResult.records;
    state.tableData.totalCount = pageResult.totalCount;
    state.tableData.loading = false;
};
const download = (row: FileVo) => {
    window.open(row.url, "_blank")
};
const copyUrl = (row: FileVo) => {
    CommonUtils.copyText(row.url);
};
// 打开新增弹窗
const openAddDialog = () => {
    addFileRef.value.openDialog();
};

// 删除
const deleteFile = (row: FileVo) => {
    ElMessageBox.confirm(`此操作将会同步删除“${row.name}”在云存储中对应的文件，并且不可恢复，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            state.tableData.loading = true;
            await fileApi.deleteFile(row.id)
            await getTableData();
            ElMessage.success('删除成功');
        }).finally(() => {
        state.tableData.loading = false;
    })
};
watch(() => state.tableData.param.page, () => {
    getTableData();
});
watch(() => state.tableData.param.size, () => {
    getTableData();
})
// 页面加载时
onMounted(() => {
    getTableData();
});
</script>

<style lang="scss" scoped>
.layout-padding {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}
</style>
